<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: '87' + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="参赛排行"
        :customNavContentBgColor="'linear-gradient(90deg, #ffd700 0%, #ff8c00 100%)'" />
      <scroll-view scroll-y class="scroll-view-content">
        <view class="score-ranking-page">
          <!-- 顶部Banner -->
          <view class="top-banner">
            <view class="banner-left">
              <view class="banner-left-title mr-25">
                <text class="title">参赛</text>
                <text class="subtitle">排行榜</text>
              </view>
              <view class="banner-left-btn">
                <view class="top-btn mt-5">TOP100</view>
              </view>
            </view>
            <!-- <view class="banner-right">
            </view> -->
          </view>

          <!-- 排行榜头部 -->
          <view class="ranking-header">
            <view class="header-left">
              <text class="header-title">参赛排行榜</text>
              <!-- <image class="help-icon" :src="imgUrl + 'question@2x.png'" /> -->
            </view>

          </view>
          <view class="segmented-control">
            <view v-for="(item, idx) in options" :key="item" :class="['segment', { active: idx === activeIndex }]"
              @tap="onSegmentClick(idx)">
              {{ item.name }}
            </view>
          </view>
          <!-- 排行榜列表 -->
          <view class="ranking-list">
            <view class="list-header">
              <view class="col rank">排行</view>
              <view class="col athlete">运动员</view>
              <view class="col score" v-if="activeIndex === 0">
                战数
                <!-- <image class="help-icon" :src="imgUrl + 'question@2x.png'" /> -->
              </view>
              <view class="col score" v-if="activeIndex === 1">
                检录数
                <!-- <image class="help-icon" :src="imgUrl + 'question@2x.png'" /> -->
              </view>
            </view>
            <view v-for="(item, idx) in list" :key="idx" class="list-item">
              <view class="col rank">
                <image v-if="idx+1 <= 3" class="medal" :src="getMedalIcon(idx+1)" />
                <text v-else class="rank-num">{{ idx+1 }}</text>
                <!-- <image v-if="idx < 3" class="medal" :src="getMedalIcon(idx + 1)" />
                <text v-else class="rank-num">{{ idx + 1 }}</text> -->
              </view>
              <view class="col athlete">
                <image class="avatar" :src="item.avatar ? item.avatar : imgUrl + 'avatar1@2x.png'" />
                <text class="name">{{ item.username }}</text>
              </view>
              <view class="col score" v-if="activeIndex === 0">{{ item.event_count }}</view>
              <view class="col score" v-if="activeIndex === 1">{{ item.registration_count }}</view>
            </view>
          </view>
        </view>


      </scroll-view>

    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app';
  import { useRequest } from '@/api';
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_RECORD_PARTICIPATE_STATION_POST, API_RECORD_PARTICIPATE_CHECK_POST } = useRequest();
  const years = ['2025', '2024', '2023']
  const periods = ['年度']
  const selectedYear = ref('2025')
  const selectedPeriod = ref('年度')
  const options = ref([
    {
      type: 'station',
      name: '按赛站'
    },
    {
      type: 'check',
      name: '按检录'
    }
  ])
  const activeIndex = ref(0)
  const list = ref([])

  function getMedalIcon(rank) {
    const icons = {
      1: imgUrl + 'firstPlace@2x.png',
      2: imgUrl + 'runner-up@2x.png',
      3: imgUrl + 'thirdPlace@2x.png'
    }
    return icons[rank]
  }

  function onYearChange(e) {
    selectedYear.value = years[e.detail.value]
  }
  function onPeriodChange(e) {
    selectedPeriod.value = periods[e.detail.value]
  }


  function onSegmentClick(idx) {
    activeIndex.value = idx
    if (options.value[idx].type === 'station') {
      getRecordParticipateStation()
    } else {
      getRecordParticipateCheck()
    }
  }
  onShow(() => {
    getRecordParticipateStation()
  })
  const getRecordParticipateStation = async () => {
    let params = {
      year: selectedYear.value,
      period: selectedPeriod.value
    }
    console.log(params)
    list.value = []
    try {

      const res = await API_RECORD_PARTICIPATE_STATION_POST(params)
      console.log('getRecordParticipateStation', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          list.value = res.data.data;
        } else {
          list.value = [];
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('list', list.value);

    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  const getRecordParticipateCheck = async () => {
    let params = {
      year: selectedYear.value,
      period: selectedPeriod.value
    }
    console.log(params)
    list.value = []
    try {

      const res = await API_RECORD_PARTICIPATE_CHECK_POST(params)
      console.log('getRecordParticipateCheck', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          list.value = res.data.data;
        } else {
          list.value = [];
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('list', list.value);

    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>
</style>